<template>
  <div class="es6">
    <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
      <el-tab-pane
        :key="item.name"
        v-for="(item, i) in editableTabs"
        :label="item.title"
        :name="item.name"
      >
        <components :is="components.length + 1 > Number(editableTabsValue) ? components[i] : components[1]"></components>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
 
<script>
import ArrowFun from './child/arrowFun.vue'
import Promise from './child/promise.vue'
// import  from './child/.vue'
export default {
  name: 'es6',
  components: {ArrowFun, Promise},
  data () {
    return {
      components: [
        'ArrowFun',
        'Promise',
      ],
      editableTabsValue: '2',
      editableTabs: [
        {
          title: 'String',
          name: '1',
          content: 'Tab 1 content'
        }, 
        {title: 'Array', name: '2', content: 'Tab 2 content'},
        {title: 'Tab 3', name: '3'},
        {title: 'Tab 4', name: '4'},
        {title: 'Tab 5', name: '5'},
        {title: 'Tab 6', name: '6'},
        {title: 'Tab 7', name: '7'},
        // {title: 'Tab ', name: ''},
      ],
      tabIndex: 2
    }
  },
  methods: {
    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        this.tabIndex = this.tabIndex < this.editableTabs.length ? this.editableTabs.length : this.tabIndex 
        let newTabName = ++this.tabIndex + '';
        // console.log(newTabName)
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          // content: 'New Tab content'
        });
        this.editableTabsValue = newTabName;
      }
      if (action === 'remove') {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }
    }
  }
}
</script>
 
<style scoped lang="less">
 
</style>